<template>
    <el-main>
      <div class="Detail_top">
        <el-row>
          <el-col :span="18">
            <div class="check_sn">违规详情
           
            </div>
          </el-col>
          <el-col :span="6"
                  style="text-align:right">
            <el-button @click="back"
                       size="small"
                       type="primary"
                       icon="el-icon-back">返回</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="">违规司机：{{ tableData.driver_name }}</div>
          </el-col>
          <el-col :span="8">
            <div class="">违规车辆：{{ tableData.truck_card }}</div>
          </el-col>
          <el-col :span="8">
            <div class="">违规类型：{{ tableData.violation_name }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="">发生时间：{{ tableData.create_dt }}</div>
          </el-col>
          <el-col :span="8"> 
            <div class="">违规内容：{{ tableData.violation_contents }}</div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </template>
  <script>
  import {
    mapState
    
  } from 'vuex'
  import {
    violationList
  } from '../../api.js'
  export default {
    name: "runMangeDetail",
    data () {
      return {
        tableData: {},
        activeName: 'first',
        id: '',
      }
    },
    async mounted () {
      this.id = this.$route.query.id
      this.getTableDate();
    },
    methods: {
      //获取信息
      getTableDate () {
        var _this = this;
        violationList({
            id: this.id,
          }).then(res => {
            if (res.ErrorCode == 0) {
                _this.tableData = res.Data.list[0]
            } else {
              this.$message.error(res.ErrorMsg)
            }
          })
      },
      handleClick (tab, event) {
        console.log(tab, event);
      },
      back () {
        this.$router.back()
      },
      formatDept(cellValue){
          return Array.prototype.join.call(cellValue, '，');
        },
      formattitle(cellValue){
        if(cellValue == 1){
          return '需要'
       }else{
          return '不需要'
       }
      },
    },
    computed: {
      ...mapState({
        access_token: state => state.access_token,
        baseUrl: state => state.baseUrl,
      }),
    },
  }
  </script>
  <style scoped>
  .el-rate__icon{
    font-size: 30px !important;
  }
  .el-row {
    margin-top: 25px;
  }
  .el-row.transport_box {
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .el-tag--primary {
    background-color: #ad0c25;
    border-color: #ad0c25;
    color: #fff;
  }
  
  .check_sn {
    font-size: 20px;
    font-weight: 600;
  }
  
  .el-steps.el-steps--horizontal {
    width: calc(100% - 100px);
    margin-left: 50px;
  }
  
  main >>> .el-card .el-step__head {
    width: 100%;
  }
  
  main >>> .detaile-box .el-step__head {
    height: 100%;
  }
  
  .detaile-box {
    min-height: 500px;
  }
  
  main >>> .el-step__icon {
    line-height: 18px;
  }
  main >>> .el-row.transport_title {
    /* border-bottom: 1px solid #e4e7ed; */
    padding-bottom: 10px;
    width: 100%;
  }
  .Detail_top{
    background-color: rgb(246, 239, 238);
    padding: 20px;
  }
  .Detail_bottom{
    padding: 20px;
  }
  .el-tag.el-tag--info{
    font-size: 16px;
    margin-right: 10px;
  }
  .customer{
   padding: 30px 0;
   font-size: 18px;
   font-weight: 500;
  }
  .cus_title{
    color: rgb(173, 12, 37);
  }
  </style>